<template>
	<view class="apply-refund">
		<NavBar title="申请退款" :left="true"/>
		<view class="content">
			<view class="refund-reason">
				<view class="label"> 退款原因 </view>
				<textarea maxlength="100" v-model="txt" placeholder="请输入退款原因" placeholder-class="texta" />
				<view class="num"> {{txt.length}}/100 </view>
			</view>
			<view class="refund-price">
				<view class="label">退款金额(元)</view>
				<view class="value"> {{orderPrice}} </view>
			</view>
			<view class="btn" @tap="refund"> 确定 </view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import { RefundApplyApi } from '@/service/index.js'
	const txt = ref('')
	const orderId = ref()
	const orderPrice = ref()
	const refund = () => {
		if(txt.value=='') return getApp().globalData.toast('请输入退款原因')
		const params = {
			order_id: orderId.value,
			refund_cause: txt.value
		}
		RefundApplyApi(params).then(res => {
			getApp().globalData.toast('申请成功')
			uni.navigateBack()
		})
	}
	onLoad((e) => {
		const { order_id, order_price } = e
		orderId.value = order_id
		orderPrice.value = order_price
	})
</script>

<style lang="scss" scoped>
	.apply-refund {
		.content {
			padding: 10px 12px;
			.refund-reason, .refund-price {
				width: 100%;
				padding: 16px;
				border-radius: 10px;
				background-color: #fff;
				box-sizing: border-box;
				.label {
					font-weight: 400;
					font-size: 16px;
					color: #333333;
					line-height: 20px;
				}
				.value {
					font-weight: bold;
					font-size: 14px;
					color: #333333;
					line-height: 20px;
				}
				textarea {
					margin-top: 9px;
					width: 100%;
					height: 100px;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
				.texta {
					color: #C4C4C4;
					font-size: 14px;
					font-weight: 400;
				}
				.num {
					text-align: right;
					font-weight: 400;
					font-size: 14px;
					color: #C4C4C4;
					line-height: 20px;
				}
			}
			.refund-price {
				margin-top: 10px;
				display: flex;
				justify-content: space-between;
			}
			.btn {
				width: 100%;
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				font-weight: 500;
				line-height: 50px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
				margin-top: 30px;
			}
		}
	}
</style>
